<template>
	<view class="mix-page-header">
		<view class="content row" 
			:style="{
				paddingRight: headerPaddingRight + 'px',
				paddingTop: statusBarHeight + 'px',
				height: navigationBarHeight + statusBarHeight + 'px'
			}">
			<view class="btn center">
				<text class="mix-icon icon-xiaoxi"></text>
				<view class="msg"></view>
			</view>
			<view
				class="search-wrap center"
				:style="{height: customHeight + 'px'}" 
			>
				<text class="mix-icon icon-sousuo"></text>
				<text>输入关键字搜索</text>
			</view>
			<!-- #ifndef MP -->
			<view class="btn center" @click="scanCode">
				<text class="mix-icon icon-saoma"></text>
			</view>
			<!-- #endif -->
		</view>
		<!-- 占位栏 -->
		<view v-if="showFillView" :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
	</view>
</template>

<script>
	export default {
		name: 'HomePageHeader',
		data () {
			return {}
		},
		props: {
			//顶部是否占位
			showFillView: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			customWidth(){
				return this.systemInfo.custom.width;
			},
			customHeight(){
				return this.systemInfo.custom.height;
			},
			//小程序右侧需要留出气泡空间
			headerPaddingRight(){
				// #ifndef MP
				return 0;
				// #endif
				// #ifdef MP
				return this.customWidth + 20;
				// #endif
			},
		},
		methods: {
			
		}
	}
</script>

<style>
</style>